<template>
  <a-modal
    :title="title"
    width="20%"
    :visible="visible"
    :confirmLoading="loading"
    :footer="null"
    @cancel="()=>{this.visible=false}">
    <template>
      <div class="UploadFiles" :key="FileKey">
        <a-upload
          list-type="picture-card"
          :multiple="false"
          :action="$rootUrl+leading"
          :headers="headers"
          @change="handleChange"
          @preview="handlePreview"
          accept="image/*"
          :fileList="fileList"
          :remove="handleRemove"
          :before-upload="beforeUpload">
          <div v-if="fileList.length < maxCount">
            <a-icon type="plus" />
            <div>选择</div>
          </div>
        </a-upload>
        <a-modal title="头像预览" :visible="previewVisible" :footer="null" @cancel="handleCancel">
          <img alt="example" style="width: 100%" :src="previewImage" />
        </a-modal>
      </div>
      <div class="UploadSave">
        <a-button
          type="primary"
          :disabled="fileList.length === 0"
          :loading="uploading"
          style="margin-top: 20px;width: 200px;height: 50px"
          @click="handleUpload">
          {{ this.uploading ? '上传中......' : '保存图片' }}
        </a-button>
      </div>
    </template>
  </a-modal>
</template>
<script>
import Token from '../../utils/cache/TokenCache'

export default {
  components: {
    Token
  },
  props: {
    parentObj: Object,
    leading: { type: String, required: false },
    maxCount: {
      type: Number,
      default: 1
    }
  },
  data () {
    return {
      fileObject: null,
      visible: false,
      loading: false,
      uploading: false,
      title: '',
      fileList: [],
      FileKey: '',
      previewVisible: false,
      previewImage: '',
      uploadData: {
        TypeName: this.typeName,
        Remark: this.remark
      },
      headers: {
        authorization: 'Bearer ' + Token.getToken()
      },
      fileInfo: {
        maxsize: 1024 * 1024 * 100
      }
    }
  },
  watch: {
    visible () {
      if (this.visible) {
        this.FileKey = ''
        this.fileList = []
      } else {
        this.FileKey = Math.random()
      }
    }
  },
  methods: {
    init () {
      this.visible = true
    },
    openForm (title) {
      this.init()
      this.title = title
    },
    beforeUpload (file) {
      console.log(file)
      const isLt100M = file.size / 1024 / 1024 > this.fileInfo.maxsize
      if (isLt100M) {
        this.$message.warning(
          '上传附件大小不能超过' + this.fileInfo.maxsize + 'M。'
        )
        return isLt100M
      }
      return true
    },
    handlePreview (file) {
      this.previewImage = file.url || file.thumbUrl
      this.previewVisible = true
    },
    handleCancel () {
      this.previewVisible = false
    },
    handleRemove () {
      this.fileList = []
    },
    handleChange (info) {
      console.log(info)
      this.fileList = info.fileList
      this.fileObject = info
    },
    handleUpload () {
      if (this.fileObject) {
        if (this.fileObject.file.status !== 'uploading') {
          this.uploading = true
          console.log(this.fileObject.file, this.fileObject.fileList)
        }
        if (this.fileObject.file.status === 'done') {
          if (this.fileObject.file.response.Success === false || this.fileObject.file.response.status === 'error') {
            this.$message.error(`${this.fileObject.file.name}文件,${this.fileObject.file.response.Msg},请检查文件内容！ `)
            this.uploading = false
          } else {
            this.$message.success(`${this.fileObject.file.response.name}  图片上传成功！`)
            console.log(this.fileObject.file.response.status)
            this.parentObj.uploadFileURL = this.fileObject.file.response.url
            this.parentObj.UpdateSaveFileUrl()
            this.visible = false
          }
        } else if (this.fileObject.file.status === 'error') {
          this.$message.error(`服务器异常，${this.fileObject.file.name} 图片上传失败！`)
          this.uploading = false
        }
      }
    }
  }
}
</script>
<style scoped lang="less">
/deep/ .ant-upload.ant-upload-select-picture-card {
  margin: 0 auto;
  width: 200px;
  height: 200px;
  text-align: center;
}

/deep/ .ant-upload-list-picture-card-container {
  margin: 0 auto;
  width: 200px;
  height: 200px;
  text-align: center;
}

/deep/ .ant-upload-list-picture-card .ant-upload-list-item {
  margin: 0 auto;
  width: 200px;
  height: 200px;
  text-align: center;
}

/deep/ .ant-upload-picture-card-wrapper {
  margin: 0 auto;
  width: 200px;
  height: 200px;
}

.UploadFiles {
  margin: 20px;
  text-align: center;
}

.UploadSave {
  text-align: center;
}
</style>
